<template>
	<view class="mine">
		<view class="content">
			<block v-for="(item,i) in list" :key="i">
				<view class="content-item" @tap="toPage(`/pages/Info/detail?id=${item.id}`)">
					<view class="content-item-time">
						<view class="content-item-time-type">
							<text>{{item.cate}}</text>

						</view>
						<!-- <image src="@/static/images/login/juxin.png" mode=""></image> -->
					    <view class="content-item-time-text">
					    	<text>{{item.update_time}}</text>
					    </view>
					</view>
					<view class="content-item-center">
						<text>{{item.title}}</text>
					</view>
				</view>
			<!-- 	<view class="item fadeInLeft" >
					<view class="imgtop">
						<u--image :src="item.thumb" :fade="true" duration="450" width='100%' height="auto"
							:lazy-load="true" mode="widthFix">
							<template v-slot:loading>
								<u-loading-icon color="red"></u-loading-icon>
							</template>
						</u--image>
						<view class="title u-line-1">{{item.title}}</view>
					</view>
					<view class="top">
						<text>{{item.update_time}}</text>
					</view>
					<view class="des u-line-3" v-if="item.description">{{item.description}}</view>
				</view> -->
			</block>
			<block v-if="!loading&&list.length<1">
				<Empty text="暂无消息"></Empty>
			</block>

			<view class="Isend" v-else-if="list.length==total&&total>2">
				已经到底了
			</view>
			<view class="Isend" v-else-if="list.length<total">
				下拉加载更多
			</view>
		</view>


	</view>
</template>

<script>
	import {
		mixin
	} from '@/Mixins/mixin.js'
	import Empty from "@/components/Empty.vue"
	export default {
		mixins: [mixin],
		components: {
			Empty
		},
		data() {
			return {
				loading: false,
				page: 1,
				size: 10,
				total: '',
				list: []
			}
		},
		onReady() {

		},
		onLoad() {
			this.getList()
		},
		onPullDownRefresh() {
			this.page = 1
			this.getList()
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.getList()
			}
		},
		methods: {
			//获取列表
			async getList() {
				let list = await this.articleList(2, this.page, this.size)
				this.loading = true
				if (list.code == 200) {
					if (this.page == 1) {
						this.list = []
					}
					this.total = list.total
					if (this.list.length < list.total) {
						this.list = this.list.concat(list.data)
						this.page += 1
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.mine {
	
		min-height: 100vh;
		box-sizing: border-box;
		padding: 30rpx;
		background-color: $nft-bg-color;
	    background-color: #F8F6F9;
		.Isend {
			font-size: 28rpx;
			font-weight: 400;
			color: #808080;
			line-height: 36rpx;
			text-align: center;
			margin: 16rpx;
		}

		.content {
			.item {
				background: #FFFFFF;
				// background: #202020;
				border-radius: 28rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-direction: column;
				// padding: 26rpx 34rpx 26rpx 34rpx;
				margin-bottom: 40rpx;
				box-shadow: 2px 2px 8px 6px rgba(230, 230, 230, 0.5);

				.imgtop {
					width: 100%;
					height: 300rpx;
					overflow: hidden;
					border-radius: 28rpx 28rpx 0 0;
					position: relative;

					.icon {
						height: 100%;
						width: 100%;
					}

					.title {
						position: absolute;
						bottom: 0;
						color: #FFFFFF;
						width: calc(100% - 38rpx);
						background: rgba(0, 0, 0, 0.56);
						padding: 5rpx 20rpx;
						font-size: 32rpx;
						overflow: hidden;

					}
				}

				.top {
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					width: 100%;
					margin: 20rpx 0;

					text {
						font-size: 32rpx;
						font-weight: 600;
						color: #FFFFFF;
						margin: 0 20rpx;

						&:nth-child(1) {
							font-size: 20rpx;
							font-weight: 600;
							color: #333333;
							text-align: right;
						}
					}
				}

				.des {
					margin: 0 0 28rpx;
					font-size: 28rpx;
					font-weight: 600;
					color: #FFFFFF;
					line-height: 42rpx;
					text-align: left;
					width: calc(100% - 40rpx)
				}
			}
		}
	}
    .content{
		&-item{
			width: calc(100vw - 60rpx);
			min-height: 202rpx;
			background-color:#FFFFFF ;
			margin-bottom: 28rpx;
			border-radius: 8rpx;
			&-time{
				display: flex;
				align-items: center;
				&-type{
					margin: 24rpx 10rpx 0 28rpx;
					width: 87rpx;
					height: 42rpx;
                    background-image: url("@/static/images/login/juxin.png");
					background-size: 100% 100%;
					line-height: 42rpx;
					text-align: center;
					text{
						font-size: 30rpx;
						font-family: YouSheBiaoTiHei;
						color: #FFFFFF;
					
					}
				}

				&-text{
					margin: 24rpx 0 0 0rpx;
					width: 280rpx;
					height: 42rpx;
					background-image: url('@/static/images/login/juxianb.png');
				    background-size: 100% 100%;
					margin-left: -10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					text{
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #737482;
					}
				}
				
			}
			&-center{
				width: calc(100% - 48rpx);
				margin: auto;
				text{
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #252526;
				}
				
			}
		}
	}
</style>
